<template>
  <!--修改密码-->
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <validation-observer ref="observer" v-slot="{validate}">
      <form method="post">
        <div class="layui-form-item">
          <validation-provider name="nowpass" rules="required|min:6|max:16" v-slot="{errors}">
            <div class="layui-row">
              <label class="layui-form-label">当前密码</label>
              <div class="layui-input-inline">
                <input type="password" placeholder="请输入当前密码" v-model="nowpass" name="nowpass" autocomplete="off" class="layui-input">
              </div>
              <div class="error layui-form-mid">
                <span style="color: red;">{{errors[0]}}</span>
              </div>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <validation-provider name="pass" rules="required|min:6|max:16" v-slot="{errors}">
            <div class="layui-row">
              <label class="layui-form-label">新密码</label>
              <div class="layui-input-inline">
                <input type="password" v-model="pass" placeholder="6到16个字符" name="pass" autocomplete="off" class="layui-input">
              </div>
              <div class="error layui-form-mid">
                <span style="color: red;">{{errors[0]}}</span>
              </div>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <validation-provider name="repass" rules="required|confirmed:pass" v-slot="{errors}">
            <div class="layui-row">
              <label class="layui-form-label">确认密码</label>
              <div class="layui-input-inline">
                <input type="password" v-model="repass" placeholder="请输入确认密码" name="repass" autocomplete="off" class="layui-input">
              </div>
              <div class="error layui-form-mid">
                <span style="color: red;">{{errors[0]}}</span>
              </div>
            </div>
          </validation-provider>
        </div>
        <div class="layui-form-item">
          <button class="layui-btn" type="button" @click="validate().then(submit)" lay-submit>确认修改</button>
        </div>
      </form>
    </validation-observer>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import { updatePass } from '@/api/user'
export default {
  name: 'password',
  data () {
    return {
      nowpass: '',
      pass: '',
      repass: ''
    }
  },
  components: {
    ValidationProvider, ValidationObserver
  },
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate()
      if (!isValid) {
        return
      }

      if (this.nowpass === this.pass) {
        this.$alert('新旧密码不得相同，请确认！')
        return
      }
      // const sid = this.$store.state.sid
      updatePass({
        oldpwd: this.nowpass,
        newpwd: this.pass
      }).then((res) => {
        console.log(res)
        if (res.code === 200) {
          this.$alert('密码修改成功')
          this.nowpass = ''
          this.pass = ''
          this.repass = ''
          requestAnimationFrame(() => {
            this.$refs.observer.reset()
          })
        } else {
          this.$alert(res.msg)
        }
      }).catch((err) => {
        const data = err.response.data
        if (data.code === 500) {
          this.$alert('服务器链接错误')
        }
        console.log(err)
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
